<template>
	<view class="cart-container">
		<view class="content">
			<!-- 未登录状态 -->
			<view v-if="!isLogin" class="not-logged-in">
				<uni-icons type="person" size="100" color="#cccccc"></uni-icons>
				<text class="unlogin-text">登录后才能查看购物车</text>
				<button class="btn-login" @click="goToLogin">去登录</button>
			</view>
			
			<!-- 已登录状态 -->
			<view v-else>
				<view v-if="cartItems.length > 0" class="cart-list">
					<view class="cart-item" v-for="(item, index) in cartItems" :key="item.id">
						<view class="item-left">
							<checkbox 
								:checked="item.selected" 
								@click="toggleSelect(item.id)"
								color="#e93b3d"
							/>
						</view>
						<view class="item-middle">
							<image :src="item.image" class="product-image"></image>
							<view class="product-info">
								<text class="product-name">{{ item.name }}</text>
								<text class="product-spec">{{ item.specs && item.specs.size ? item.specs.size : '标准规格' }}</text>
								<view class="price-section">
									<text class="product-price">¥{{ item.price }}</text>
								</view>
							</view>
							<view class="button-section">
								<text class="btn-delete" @click="deleteItem(item.id)">删除</text>
								<view class="quantity-control">
									<view class="quantity-btn" @click="decreaseQuantity(item.id)">-</view>
									<view class="quantity-num">{{ item.quantity }}</view>
									<view class="quantity-btn" @click="increaseQuantity(item.id)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view v-else class="empty-cart">
					<image src="/static/cart/empty.png" class="empty-image"></image>
					<text class="empty-text">购物车空空如也</text>
					<button class="btn-go-shopping" @click="goShopping">去逛逛</button>
				</view>
			</view>
		</view>
		
		<view v-if="isLogin && cartItems.length > 0" class="footer">
			<view class="footer-left">
				<checkbox 
					:checked="allSelected" 
					@click="toggleSelectAll"
					color="#e93b3d"
				/>
				<text class="select-all-text">全选</text>
			</view>
			<view class="footer-middle">
				<text class="total-text">合计: </text>
				<text class="total-price">¥{{ selectedTotalAmount }}</text>
			</view>
			<button class="btn-checkout" @click="checkout">结算({{ selectedCount }})</button>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions } from 'vuex'

	export default {
		data() {
			return {
				// 不再需要本地购物车数据，全部使用Vuex管理
			}
		},
		computed: {
			// 映射购物车相关的状态和getters
			...mapState('cart', ['cartItems', 'totalAmount', 'totalQuantity']),
			...mapGetters('cart', ['getCartItemCount', 'getSelectedItems', 'getSelectedTotalAmount']),
			
			// 映射用户登录状态
			...mapGetters(['getIsLogin']),
			
			// 登录状态
			isLogin() {
				return this.getIsLogin
			},
			
			// 是否全选
			allSelected() {
				return this.cartItems.length > 0 && this.cartItems.every(item => item.selected)
			},
			
			// 选中商品数量
			selectedCount() {
				return this.getSelectedItems.length
			},
			
			// 选中商品总金额
			selectedTotalAmount() {
				return this.getSelectedTotalAmount.toFixed(2)
			}
		},
		onLoad() {
			// 初始化购物车
			this.initCart()
		},
		onShow() {
			// 每次显示页面时刷新购物车数据
			this.initCart()
		},
		methods: {
			// 映射购物车相关的actions
			...mapActions('cart', [
				'initCart', 
				'toggleProductSelection', 
				'toggleSelectAll', 
				'updateProductQuantity',
				'updateQuantity',
				'removeFromCart',
				'removeSelectedItems'
			]),
			
			// 切换选中状态
			toggleSelect(productId) {
				this.toggleProductSelection(productId)
			},
			
			// 全选/取消全选
			toggleSelectAll() {
				this.$store.dispatch('cart/toggleSelectAll', !this.allSelected)
			},
			
			// 增加数量
			increaseQuantity(productId) {
				const item = this.cartItems.find(item => item.id === productId)
				if (item) {
					this.updateQuantity({
						id: productId,
						quantity: item.quantity + 1
					})
				}
			},
			
			// 减少数量
			decreaseQuantity(productId) {
				const item = this.cartItems.find(item => item.id === productId)
				if (item) {
					if (item.quantity > 1) {
						this.updateQuantity({
							id: productId,
							quantity: item.quantity - 1
						})
					} else if (item.quantity === 1) {
						// 当数量为1时，点击减少按钮提示是否移除商品
						uni.showModal({
							title: '提示',
							content: '是否移除该商品？',
							success: (res) => {
								if (res.confirm) {
									this.removeFromCart(productId)
								}
							}
						})
					}
				}
			},
			
			// 删除商品
			deleteItem(productId) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个商品吗？',
					success: (res) => {
						if (res.confirm) {
							this.removeFromCart(productId)
						}
					}
				})
			},
			
			// 去购物
			goShopping() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			
			// 去登录
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			
			// 结算
			checkout() {
				if (this.selectedCount === 0) {
					uni.showToast({
						title: '请选择要结算的商品',
						icon: 'none'
					})
					return
				}
				
				// 检查登录状态
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				
				// 跳转到结算页面
				uni.navigateTo({
					url: '/pages/order/checkout'
				})
			}
		}
	}
</script>

<style>
.cart-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.content {
	flex: 1;
	overflow: hidden;
}

.not-logged-in {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 40rpx;
}

.unlogin-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 40rpx;
}

.unlogin-text {
	font-size: 30rpx;
	color: #999;
	margin-bottom: 60rpx;
}

.btn-login {
	background-color: #e93b3d;
	color: #fff;
	border-radius: 10rpx;
	font-size: 32rpx;
}

.cart-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	margin: 10rpx 20rpx;
	background-color: #fff;
	border-radius: 10rpx;
}

.item-left {
	margin-right: 20rpx;
}

.item-middle {
	display: flex;
	flex: 1;
	align-items: center;
}

.product-image {
	width: 150rpx;
	height: 150rpx;
	margin-right: 20rpx;
	border-radius: 10rpx;
	flex-shrink: 0;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-right: 20rpx;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.product-spec {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 20rpx;
}

.price-section {
	display: flex;
	flex-direction: column;
}

.product-original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

.product-price {
	font-size: 30rpx;
	color: #e93b3d;
	font-weight: bold;
}

.button-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 150rpx;
	flex-shrink: 0;
}

.btn-delete {
	color: #a3a2a2ff;
	font-size: 30rpx;
	margin-bottom: 40rpx;
}

.quantity-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 150rpx;
}

.quantity-btn {
	width: 45rpx;
	height: 45rpx;
	border-radius: 50%;
	background-color: #e93b3d;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: bold;
}

.quantity-num {
	font-size: 30rpx;
	color: #333;
	min-width: 40rpx;
	text-align: center;
}

.empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.empty-image {
	width: 150rpx;
	height: 150rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 30rpx;
}

.btn-go-shopping {
	background-color: #e93b3d;
	color: #fff;
	border-radius: 10rpx;
	padding: 5rpx 40rpx;
	font-size: 28rpx;
}

.footer {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #fff;
	border-top: 1px solid #eee;
}

.footer-left {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}

.select-all-text {
	font-size: 28rpx;
	color: #333;
	margin-left: 10rpx;
}

.footer-middle {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-right: 20rpx;
}

.total-text {
	font-size: 28rpx;
	color: #333;
}

.total-price {
	font-size: 32rpx;
	color: #e93b3d;
	font-weight: bold;
}

.btn-checkout {
	background-color: #e93b3d;
	color: #fff;
	border-radius: 20rpx;
	padding: 0rpx 40rpx;
	font-size: 28rpx;
	margin-left: 20rpx;
}

.wx-checkbox-input{
	border-radius: 50% !important;
	width: 40rpx !important;
    height: 40rpx !important;
}
wx-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    color: #fff !important;
    background-color: #e93b3d;
    border: 2rpx solid #e93b3d
}
</style>